import {
  defineConfig
} from "unocss";
import presetWeapp from 'unocss-preset-weapp';
import { extractorAttributify, transformerClass } from 'unocss-preset-weapp/transformer'

const include = [/\.wxml$/]

const transformRules = {
  '.': '-d111-',
  '/': '-s111-',
  ':': '-c111-',
  '%': '-p111-',
  '!': '-e111-',
  '#': '-w111-',
  '(': '-b111l-',
  ')': '-b111r-',
  '[': '-f111l-',
  ']': '-f111r-',
  '$': '-r111-',
  ',': '-r222-',
}
const {
  presetWeappAttributify,
  transformerAttributify
} = extractorAttributify({
  transformRules
})
export default defineConfig({
  content: {
    pipeline: {
      include
    }
  },
  presets: [
    presetWeapp({
      transformRules
    }),
    presetWeappAttributify()
  ],
  content: {
    pipeline: {
      include
    }
  },
  transformers: [
    // options 见https://github.com/MellowCo/unocss-preset-weapp/tree/main/src/transformer/transformerAttributify
    transformerAttributify(),

    // options 见https://github.com/MellowCo/unocss-preset-weapp/tree/main/src/transformer/transformerClass
    transformerClass({
      transformRules,
    }),
  ],
/* 快捷方式定义 */
  shortcuts: [
    ['wh-full', 'w-full h-full'],
    ['f-c-c', 'flex justify-center items-center'],
    ['f-c', 'flex items-center'],
    ['f-btw-c', 'flex justify-between items-center'],
    ['flex-col', 'flex flex-col'],
    ['absolute-lt', 'absolute left-0 top-0'],
    ['absolute-lb', 'absolute left-0 bottom-0'],
    ['absolute-rt', 'absolute right-0 top-0'],
    ['absolute-rb', 'absolute right-0 bottom-0'],
    ['absolute-center', 'absolute-lt f-c-c wh-full'],
    ['absolute-c', 'absolute top-50% left-50% translate--50%'],
    ['fixed-lb','position-fixed left-0 bottom-0'],
    ['fixed-lt','position-fixed left-0 top-0'],
    ['b-t', 'b-t-1px b-t-solid'],
    ['b-b', 'b-b-1px b-b-solid'],
    ['b-l', 'b-l-1px b-l-solid'],
    ['b-r', 'b-r-1px b-r-solid'],
    ['text-ellipsis', 'truncate'],
    ['pointer', 'cursor-pointer'],
    ['color-0', 'text-hex-000'],
    ['color-3', 'text-hex-333'],
    ['color-6', 'text-hex-666'],
    ['color-9', 'text-hex-999'],
    ['primary', 'text-hex-FFD600'],
    ['bg-primary', 'bg-hex-FFD600 text-hex-2C353E'],
    ['b-primary', 'b-solid b-1rpx b-hex-FFD600'],
  ],
  /* 规则定义 */
  rules: [
    [/^bc-(.+)$/, ([, color]) => ({
      'border': `1rpx solid #${color}`
    })],
    [/^wh-(.+)$/, ([, size]) => ({
      'width': `${size}`,
      'height': `${size}`
    })],
    [/^lh-(.+)$/, ([, size]) => ({
      'line-height': `${size}`
    })],
    [/^flex-(.+)$/, ([, grow]) => ({
      'flex': `${grow} 1 0`
    })],
    ['nowrap', {
      'white-space': 'nowrap',
      'text-wrap': 'nowrap'
    }],
    ['bold', { 'font-weight': 'bold' }],
    [/^fw-(.+)$/, ([, number]) => ({
      'font-weight': `${number}`
    })],
    [
      'box', {
        'box-shadow': '0rpx 5rpx 15rpx 0rpx rgba(0,0,0,0.05)',
        'background': '#fff',
        'border-radius': '6rpx'
      }
    ],
  ],
  separators: '__'
})